import React, { useEffect } from "react";
import { Card, Descriptions } from "antd";
import { connect } from "dva";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import styles from "./index.less";

const Details = ({ dispatch, location, mobileUserDetail }) => {
  const { mobileUserId } = location.state;

  useEffect(() => {
    dispatch({
      type: "userManage/getMobileUserDetail",
      payload: { mobileUserId }
    });
  }, []);

  return (
    <PageHeaderWrapper>
      <Card bordered={false}>
        <Descriptions title={mobileUserDetail?.name}>
          <Descriptions.Item label="身份证号">
            {mobileUserDetail?.idNumber}
          </Descriptions.Item>
          <Descriptions.Item label="手机号">
            {mobileUserDetail?.mobile}
          </Descriptions.Item>
          <Descriptions.Item label="银行卡号">
            {mobileUserDetail?.bankAccount}
          </Descriptions.Item>
          <Descriptions.Item label="最高学历">
            <a
              target="_blank"
              href={mobileUserDetail?.qualifications}
              download={mobileUserDetail?.qualifications}
            >
              {mobileUserDetail?.qualifications}
            </a>
          </Descriptions.Item>
          <Descriptions.Item label="身份证正面">
            <a
              target="_blank"
              href={mobileUserDetail?.idNumberPositiveUrl}
              download={mobileUserDetail?.idNumberPositiveUrl}
            >
              {mobileUserDetail?.idNumberPositiveUrl}
            </a>
          </Descriptions.Item>
          <Descriptions.Item label="身份证反面">
            <a
              target="_blank"
              href={mobileUserDetail?.idNumberDorsalUrl}
              download={mobileUserDetail?.idNumberDorsalUrl}
            >
              {mobileUserDetail?.idNumberDorsalUrl}
            </a>
          </Descriptions.Item>
          <Descriptions.Item label="银行卡正面 ">
            <a
              target="_blank"
              href={mobileUserDetail?.bankAccountUrl}
              download={mobileUserDetail?.bankAccountUrl}
            >
              {mobileUserDetail?.bankAccountUrl}
            </a>
          </Descriptions.Item>
          <Descriptions.Item label="技能证书">
            {mobileUserDetail?.skillsCertificateList?.map(item => (
              <a target="_blank" href={item} download={item} className={styles.download}>
                {item}
              </a>
            ))}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ userManage }) => ({
  mobileUserDetail: userManage.mobileUserDetail
}))(Details);
